<template>
	<view>
		<!-- <view-navbar /> -->
		<!--  -->
		<!-- 		<view class="margin ms20">
			<view class="flex-cen" style="margin-top:10rpx ; margin-bottom: 16rpx;">
				<image style="margin-right: 46rpx; width:20rpx;height:36rpx" src="/static/img/search/52332.png" alt=""
					@click="back">
			</view>
		</view> -->
		<!--  -->
		<view class="flex-cen margin ms20 search_ss">
			<!-- style="width: 624rpx;" -->
			<u-search :showAction="false" placeholder="搜索疾病、症状、商品、内容" @search="search" v-model="keyword"
				:clearabled="true" searchIconColor="#7976E9" borderColor="#DDDDDD" bgColor="#ffffff"></u-search>
		</view>


		<!--  -->
		<view class="margin ms20">
			<view class="">
				<view class="flexflex justif-between">
					<view class="size_17 font_b">
						搜索历史
					</view>
					<view class="flex-cen" @click="deleteSearchHistory">
						<image src="/static/img/search/54798.png" alt="" style="width: 28rpx;height:28rpx" />
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="margin">
			<view class="flexflex flex-wrap justif-between">
				<view class="" v-for="v,i in list" :key="i" @click="clickItem(v)">
					<view class="item mb-20  text-ellipsis w-50 text-center border-2 "
						style="border-radius: 12rpx;border-color: #e0e0e0;background-color: #e0e0e0;">
						{{v}}
					</view>
				</view>
			</view>

		</view>



		<view class="margin" v-if="false">
			<view class="size_17 font_b ms20">
				搜索发现
			</view>
			<u-row class="flexflex ms20">
				<u-col span="6">
					<view class="size_14">
						阿托伐他汀钙片
					</view>
				</u-col>
				<u-col span="6">
					<view class="size_14">
						灵芝
					</view>
				</u-col>
			</u-row>
			<u-row class="flexflex ms20">
				<u-col span="6">
					<view class="size_14">
						阿托伐他汀钙片
					</view>
				</u-col>
				<u-col span="6">
					<view class="size_14">
						灵芝
					</view>
				</u-col>
			</u-row>
			<u-row class="flexflex">
				<u-col span="6">
					<view class="size_14">
						阿托伐他汀钙片
					</view>
				</u-col>
				<u-col span="6">
					<view class="size_14">
						灵芝
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				keyword: "",
				list: ['六味地黄丸', '雪菜', '钟南山', '李景']
			};
		},
		methods: {
			...mapMutations('m_user', ['getSearchHistoryStore', 'searchHistoryStore', 'deleteSearchHistoryStore']),
			...mapGetters('m_user', ['getSearchHistoryStore']),
			async searchHistory() {
				this.list = this.getSearchHistoryStore();
			},
			async deleteSearchHistory() {
				this.deleteSearchHistoryStore();
				this.searchHistory()
			},
			/* 搜素 */
			search(e) {
				this.searchHistoryStore(e)
				uni.navigateTo({
					url: `/pages_home/searchCate/searchCate?data=${e}`
				})
			},
			/* 点击历史 */
			clickItem(e) {
				this.search(e)
			},
			back() {
				/*uni.navigateBack({
					delta: 1
				})*/
				//@zxyuns 处理兼容，如果没有上一级界面则返回首页
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/home/home',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
		onLoad() {

		},
		onShow() {
			this.searchHistory()
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP */
	::v-deep .u-search__content__input {
		font-size: 28rpx !important;
	}

	/* #endif */
	.search_ss {
		::v-deep .u-search__content__input {
			font-size: 28rpx !important;
		}
	}
</style>